import React from 'react';
import style from './style.less';
import echarts from 'echarts';

class ScatterTable extends React.Component {

    constructor( props ) {
        super( props )
        this.state = {
            table: '',
            timer: ''
        }
    }

    resizeEvent = () => {
        if ( this.state.timer ) {
            clearTimeout( this.state.timer );
        }

        const timer = setTimeout( () => {
            this.state.table.resize();
        }, 200 );

        this.setState( {
            timer: timer
        } )
    }

    componentDidMount() {

        const table = echarts.init( document.getElementById( 'scatterTable' ) );

        table.setOption( {
            xAxis: {},
            yAxis: {},
            series: [ {
                symbolSize: 20,
                data: [
                    [ 10.0, 8.04 ],
                    [ 8.0, 6.95 ],
                    [ 13.0, 7.58 ],
                    [ 9.0, 8.81 ],
                    [ 11.0, 8.33 ],
                    [ 14.0, 9.96 ],
                    [ 6.0, 7.24 ],
                    [ 4.0, 4.26 ],
                    [ 12.0, 10.84 ],
                    [ 7.0, 4.82 ],
                    [ 5.0, 5.68 ]
                ],
                type: 'scatter'
            } ]

        } );

        this.setState( {
            table: table
        }, () => {
            this.state.table.resize();
        } );

        window.addEventListener( 'resize', this.resizeEvent, false )
    }

    componentWillUnmount() {
        window.removeEventListener( 'resize', this.resizeEvent, false );
    }

    render() {
        return (
            <div className={style.scatterTable}>
                <span className={style.title}>点形图</span>
                <div className={style.table} id='scatterTable'></div>
            </div>
        )
    }
}

export default ScatterTable;